<template>
  <div class="main">
    <!-- 搜索城市 s-->
    <el-select
      v-model="city"
      filterable
      remote
      placeholder="切换城市"
      :remote-method="remoteMethod"
      :loading="loading"
      class="city"
      @change="cityNameChange"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.label"
      ></el-option>
    </el-select>

    <!-- 搜索城市 e-->

    <!-- 选择日期 s -->
    <div class="block">
      <el-date-picker
        v-model="value2"
        type="datetimerange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right"
      >
      </el-date-picker>
    </div>
    <!-- 选择日期 e -->

    <!-- 选择入住人数 s -->

    <div class="inter_person" @click="showCard">
      <el-input
        v-model="totalPerson"
        placeholder="人数未定"
        class="inter_person_inp"
        suffix-icon="el-icon-user"
        readonly
      ></el-input>
      <el-card class="box-card" v-if="cardIsShow">
        <div class="header">
          <span>每间：</span>
          <i class="chen">成人</i>
          <i class="er">儿童</i>
          <div>
            <el-select
              v-model="adultValue"
              placeholder="请选择"
              size="mini"
              class="personSelect"
            >
              <el-option
                v-for="(item, index) in 7"
                :key="index"
                :value="item"
                :label="item"
              ></el-option>
            </el-select>
            <el-select
              v-model="childrenValue"
              placeholder="请选择"
              size="mini"
              class="personSelect"
            >
              <el-option
                v-for="(item, index) in 5"
                :key="index"
                :value="item - 1"
                :label="item - 1"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="line"></div>
        <div class="selectBtn">
          <el-button type="primary" size="mini" @click="submitPerson"
            >确定</el-button
          >
        </div>
      </el-card>
    </div>
    <!-- 选择入住人数 e -->

    <!-- 查看价格按钮 -->
    <div>
      <el-button type="primary" class="submit_price" @click="submitPrice"
        >查看价格</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //事实搜索的option选项渲染数组,暂定有两个值
      options: [],
      value: [], //实时搜索城市的绑定值
      loading: false, //是否从远程获取数据
      city: "", //城市id
      time: "", //入住日期数组
      adultValue: 2, //选中成人的值
      childrenValue: 0, //选中儿童的值
      totalPerson: "", //总人数
      cardIsShow: false, //默认卡片显示
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      value2: "",
    };
  },
  mounted() {
    if (this.$route.query.cityName) {
      this.city = this.$route.query.cityName;
    }
  },
  methods: {
    //当搜索城市搜索框值发生变化会触发的事件
    remoteMethod(query) {
      if (query !== "") {
        //设置正在从远程获取数据
        this.loading = true;
        //发生ajax请求获取匹配的城市信息
        this.$axios({
          method: "get",
          url: "/cities",
          params: {
            name: query,
          },
        }).then((res) => {
          //console.log(res);
          this.loading = false;
          //提取出城市名name和城市id分别赋值给potions数组
          res.data.data.forEach((element) => {
            this.options.push({ label: element.name, value: element.id });
          });
          //console.log(this.options);
        });
      }
    },
    //显示卡片
    showCard() {
      console.log(123);
      this.cardIsShow = !this.cardIsShow;
    },
    //点击确定人数事件
    submitPerson() {
      this.totalPerson = `${this.adultValue}成人 ${this.childrenValue}儿童`;
    },
    //点击查看价格
    submitPrice() {
      const form = {
        cityName: this.city,
        enterTime: this.time[0],
        leftTime: this.time[1],
      };
      this.$router.push({
        path: "/hotel",
        query: {
          ...form,
          ...this.$route.query,
        },
      });
    },
    //点击切换输出框事件
    cityNameChange(val) {
      console.log(val);
      this.$router.push({
        path: "/hotel",
        query: {
          ...this.$route.query,
          cityName: val,
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  display: flex;
}
.inter_person {
  position: relative;
  margin-right: 36px;
  .inter_person_inp {
    width: 216px;
    margin-bottom: 10px;
  }
  /deep/ .el-icon-user {
    font-size: 20px;
  }
  .box-card {
    position: absolute;
    z-index: 10;
    width: 326px;
    font-size: 14px;
    .header {
      display: flex;
      position: relative;
      justify-content: space-between;
      align-items: center;
      .chen,
      .er {
        position: absolute;
      }
      .chen {
        left: 120px;
        z-index: 10;
        top: 3px;
      }
      .er {
        left: 225px;
        z-index: 10;
        top: 3px;
      }
      .personSelect {
        width: 94px;
      }
    }
    .line {
      border-top: 1px solid #cccccc;
      margin-top: 20px;
    }
    .selectBtn {
      margin-top: 20px;
      text-align: right;
    }
  }
}
.city {
  margin-right: 36px;
}
.date {
  margin-right: 36px;
}
/deep/.el-input__inner {
  margin-right: 40px;
}
</style>